<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import useCityStore from '@/stores/modules/city'
import { useRouter } from 'vue-router'
import CityGroup from './cpns/city-group.vue'

// 获取路由对象
const router = useRouter()

// 搜索关键字
const searchKeyword = ref('')

// 返回首页
const cancelClick = () => {
  router.back()
}

// 当前显示的 tab 的索引值
const tabActive = ref()

/**
 * 这个位置发送网络请求有两个缺点：
 *   1.如果网络请求太多，那么页面组件中就包含大量的对于网络请求和数据的处理逻辑
 *   2.如果页面封装了很多的子组件，子组件需要这些数据，我们必须一步步将数据传递过去（props）
 */

// 网络请求：请求城市的数据
// const allCity = ref({})
// getCityAll().then(res => {
//   allCity.value = res.data.data
// })

// 从 Store 中获取数据
const cityStore = useCityStore()
cityStore.fetchAllCitiesData()
const { allCities } = storeToRefs(cityStore)

// 目的：获取选中标签后的数据
// computed() 当依赖的数据发生变化时，会相应改变
// 1.获取正确的key：将tabs中绑定的tabActive正确绑定（通过tab的name属性）
// 2.根据key从allCities获取数据，默认直接获取的数据不是响应式的，所以必须包裹computed
const currentGroup = computed(() => allCities.value[tabActive.value])

</script>

<template>
  <div class="city">
    <div class="top">
      <!-- 1.搜索框 -->
      <van-search v-model="searchKeyword" shape="round" placeholder="城市 / 区域 / 位置" @cancel="cancelClick" show-action />
      <!-- 2.tab的切换 -->
      <van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">
        <template v-for="(value, key, index) in allCities" :key="key">
          <!-- name 属性 可以设置父组件 v-model:active 属性的值-->
          <van-tab :name="key" :title="value.title"></van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="content">
      <!-- 方法1：从定义的 currentGroup 中获取数据 -->
      <!-- 方法2：直接从 allCities 中获取数据 -->
      <!-- allCities[tabActive] 刚开始没有值，需要使用可选链运算符（?.） -->
      <!-- 可选链运算符（?.）允许读取位于连接对象链深处的属性的值，
           运算符左侧对象包含右侧成员时，则取其成员的值
      -->
      <!-- <template v-for="city in allCities[tabActive]?.hotCities"> -->
      <!-- <city-group :groupData="currentGroup" /> -->

      <!-- 1.循环生成所有 tab 的数据 -->
      <template v-for="(value, key, index) in allCities">
        <!-- <h2 v-show="tabActive === key">{{ value.title }}</h2> -->
        <!-- 2.根据当前显示的tab的标题tabActive显示相应的数据 -->
        <!-- tips：v-show 通过控制元素的 display 属性值来实现 显示/隐藏 -->
        <city-group v-show="tabActive === key" :group-data="value" />
      </template>
    </div>

  </div>
</template>

<style lang="less" scoped>
.city {

  // 防止 .top 元素被覆盖
  .top {
    position: relative;
    z-index: 9;
  }

  .content {
    // 占据 .top 外的剩余高度
    // 语法：calc(算数表达式)
    height: calc(100vh - 98px);
    overflow-y: auto;
  }

}
</style>